<template>
  <el-form-item :label="label" :prop="prop" :label-width="labelWidth" :required="required" :rules="rules" :error="error" :show-message="showMessage" :inline-message="inlineMessage">
    <el-date-picker
      v-model="model"
      :readonly="readonly"
      :disabled="disabled"
      :clearable="clearable"
      :placeholder="placeholder"
      :size="size"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :time-arrow-control="timeArrowControl"
      :type="type"
      :format="format"
      :align="align"
      :picker-options="pickerOptions"
      :range-separator="rangeSeparator"
      :default-value="defaultValue"
      :default-time="defaultTime"
      :value-format="valueFormat"
      :popper-class="popperClass"
      :prefix-icon="prefixIcon"
      :clear-icon="clearIcon"
      :validate-event="validateEvent"
      :append-to-body="appendToBody"
      @change="change"
      @blur="blur"
      @focus="focus"

    >
    </el-date-picker>

  </el-form-item>
</template>

<script>
export default {
  props: {
    value:{
      type:[String,Number,Boolean],
      default:null
    },
    /**
     * el-form-item属性
     */
    label:{
      type:String,
      default:null,
      description:'名字'
    },
    prop:{
      type:String,
      default:null
    },
    labelWidth:{
      type:[Number,String],
      default:null
    },
    rules:{
      type:Object,
      default:null
    },
    error:{
      type:String,
      default:null,
      description:'显示的错误信息'
    },
    showMessage:{
      type:Boolean,
      default:false,
      description:'是否显示校验错误信息'
    },
    required:{
      type:Boolean,
      default:false
    },

    inlineMessage:{
      type:Boolean,
      default:true,
      description:'是否以行内形式展示校验信息'
    },
    size:{
      type:String,
      default:'medium',
      description:'可选值：large, small, mini'
    },
    /**
     * el-form-item属性end
     */
    /**
     * 全局
     */
    disabled:{
      type:Boolean,
      default:false,
      description:'是否禁用'
    },
    clearable:{
      type:Boolean,
      default:false,
      description:'是否可清空'
    },
    placeholder:{
      type:String,
      default:'请选择',
      description:'占位符'
    },
    /**
     * el-date-picker属性start
     */
    startPlaceholder:{
      type:String,
      default:null,
      description:'开始时间占位符'
    },
    endPlaceholder:{
      type:String,
      default:null,
      description:'结束时间占位符'
    },
    isRange:{
      type:Boolean,
      default:false,
      description:'是否为时间范围选择'
    },
    pickerOptions:{
      type:Object,
      default:null,
      description:'选择器选项'
    },

    format:{
      type:String,
      default:'yyyy-MM-dd',
      description:'绑定值的格式。如果没设置，则绑定值为 Date 对象'
    },
    valueFormat:{
      type:String,
      default:'yyyy-MM-dd',
      description:'绑定值的格式。如果没设置，则绑定值为 Date 对象'
    },
    defaultValue:{
      type:Date,
      default:null,
      description:'默认值'
    },
    rangeSeparator:{
      type:String,
      default:'-',
      description:'分隔符'
    },
    arrowControl:{
      type:Boolean,
      default:false,
      description:'是否使用箭头进行时间选择'
    },
    align:{
      type:String,
      default:'left',
      description:'对齐方式，可选值为 "left"、"center"、"right"'
    },

    popperClass:{
      type:String,
      default:null,
      description:'自定义弹出框类名'
    },
    prefixIcon:{
      type:String,
      default:'el-icon-date',
      description:'自定义前图标类名'
    },
    clearIcon:{
      type:String,
      default:'el-icon-circle-close',
      description:'自定义清空图标类名'
    },

    editable:{
      type:Boolean,
      default:true,
      description:'是否允许输入'
    },
    readonly:{
      type:Boolean,
      default:false,
      description:'是否只读'
    },
    validateEvent:{
      type:Boolean,
      default:true,
      description:'是否触发表单验证'
    },
    appendToBody:{
      type:Boolean,
      default:false,
      description:'是否将弹层放置于 body 内'
    },
    type:{
      type:String,
      default:'date',
      description:'显示类型，支持 "date"、"dates"、"week"、"month"、"year"、"datetime"、"datetimerange"、"daterange"、"yearrange"'
    },
    defaultTime:{
      type:Array,
      default:null,
      description:'默认时间，仅时间选择有效,数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00'
    },
    timeArrowControl:{
      type:Boolean,
      default:false,
      description:'是否使用箭头进行时间选择'
    },

    /**
     * el-date-picker属性end
     */
    /**
     * options属性start
     */


    /**
     * options属性end
     */

  },
  watch:{
    value:{
      handler(val){
        this.model = val;
      },
      immediate:true
    },
    model(val){
      this.$emit('input',val);
    }
  },
  data() {
    return {
        model:''
    };
  },
  methods: {
    change(val){
      this.$emit('change',val);
    },
    clear(val){
      this.$emit('clear',val);
    },
    blur(val){
      this.$emit('blur',val);
    },
    focus(val){
      this.$emit('focus',val);
    }

  },
  mounted: function () {

  }
};
</script>
